@cyberian said in CS420 Assignment 2 Solution and Discussion:
You are required to develop an HTML5 based webpage which draws an Animated Solar System (i.e. moon revolves around earth and earth revolves around the sun) on canvas.
Here is a screenshot of a sample page.
Your Task is to make such a page suitable for portable devices. You can use concepts of HTML5, CSS and JavaScript etc.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS420 - Assignment # 2</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script>
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init() {
sun.src = 'images/canvas_sun.png';
moon.src = 'images/canvas_moon.png';
earth.src = 'images/canvas_earth.png';
window.requestAnimationFrame(draw);
}
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0, 0, 800, 800); // clear canvas
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
ctx.save();
ctx.translate(400, 400);
// Earth
var time = new Date();
ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
ctx.translate(205, 0);
ctx.fillRect(0, -12, 40, 24); // Shadow
ctx.drawImage(earth, -12, -12);
// Moon
ctx.save();
ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
ctx.translate(0, 28.5);
ctx.drawImage(moon, -3.5, -3.5);
ctx.restore();
ctx.restore();
ctx.beginPath();
ctx.arc(400, 400, 205, 0, Math.PI * 2, false); // Earth orbit
ctx.stroke();
ctx.drawImage(sun, 0, 0, 800, 800);
window.requestAnimationFrame(draw);
}
init();
</script>
</body>
</html>
images folder
c513141f-d0e8-47e0-b866-045535ab5ee1-image.png
183cd962-9200-45ca-8868-cc3297b420b2-image.png
images:
canvas_sun.png canvas_moon.png canvas_earth.png
